<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="名称"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['title', {rules: [{required: true, message: '请输入名称！'}]}]" />
        </a-form-item>
        <a-form-item
          label="唯一键"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['name', {rules: [{required: true,message: '请输入唯一键！'}]}]" />
        </a-form-item>
        <a-form-item
          label="菜单ICON"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['icon', {rules: [{required: false}]}]" />
        </a-form-item>
        <a-form-item
          label="组件"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['component', {rules: [{required: false}]}]" />
        </a-form-item>
        <a-form-item
          label="重定向"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input v-decorator="['redirect', {rules: [{required: false}]}]" />
        </a-form-item>
         
        <a-form-item
          label="父节点"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input disabled v-decorator="['parentId', {rules: [{required: true, message: '请输入父节点！'}]}]" />
        </a-form-item>
        <a-form-item
          label="排序"
          :labelCol="{span: 4}"
          :wrapperCol="{span: 20}"
        >
          <a-input-number :min="1" v-decorator="['sort', {rules: [{required: true, message: '请输入排序！'}]}]" />
        </a-form-item>
      </a-form>
       
      </a-form>
    </a-spin>
  </a-modal>
</template>


<script>
import { getPermissions } from '@/api/manage'
import pick from 'lodash.pick'

  import {
    postAxiosUrl
  } from '@/api/manage'
export default {
  data () {
    return {
      id : '',
      menuRank : '0',
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  created () {
    
  },
  methods: {
  add () {
    this.id = ''
    this.menuRank = '0'
    this.form.resetFields()
    this.visible = true
    this.$nextTick(() => {
      this.form.setFieldsValue({
              parentId: '0',
            })
    })

  },
  edit (record) {
     const { form: { setFieldsValue } } = this
     this.visible = true
     const me = this
      this.$nextTick(() => {
      me.id = record.id
      setFieldsValue(pick(record, ['title']))
      setFieldsValue(pick(record, ['name']))
      setFieldsValue(pick(record, ['icon']))
      setFieldsValue(pick(record, ['parentId']))
      setFieldsValue(pick(record, ['sort']))
      setFieldsValue(pick(record, ['component']))
      
    })
  },
  addSubMenu (record) {
     this.form.resetFields()
     this.visible = true
     this.id = ''
     const { form: { setFieldsValue } } = this
      const me = this
      this.$nextTick(() => {
        me.menuRank = record.menuRank
      setFieldsValue({
              parentId: record.id,
            })
    })
  },
  close () {
      this.$emit('close')
      this.visible = false
  },
  handleCancel () {
      this.close()
  },
  handleOk () {
      const _this = this
      
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)

          _this.confirmLoading = true
         values.id = this.id
          values.menuRank = this.menuRank
         postAxiosUrl('setMenu', values)
           .then(data => {
              _this.visible = false
              _this.confirmLoading = false
              _this.$emit('ok', values)
           })
        }
      })
    }

  }
}
</script>

<style>
</style>
